<template>
    <div>
        <div class="echarts-box">
            <div id="moderatedData" :style="{ width: '1000px', height: '500px' }"></div>
        </div>
    </div>
</template>

<script>
import { onMounted, onUnmounted, reactive } from 'vue'
import * as echarts from "echarts"
import { getLogData } from '../api/memberRecord'

export default {
    setup() {
        let echart = echarts

        const echartData = reactive({
            chartData: []
        })

        onMounted(() => {
            getEchartData()
        })

        const getEchartData = () => {
            getLogData().then((res) => {
                echartData.chartData = sortChartData(res.data)
                initEchart()
            })
        }

        function sortChartData(data) {
            const sortedData = [];
            const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

            weekdays.forEach((weekday) => {
                const matchingItem = data.find(item => item.week === weekday);
                if (matchingItem) {
                    sortedData.push(matchingItem.recordCount);
                } else {
                    sortedData.push(0);
                }
            });

            return sortedData;
        }

        function initEchart() {
            echartData.chart = echart.init(document.getElementById("moderatedData"));
            echartData.chart.setOption({
                title: {
                    text: '上周已审核的视频数量',
                    textAlign: 'left',
                    textStyle: {
                        fontSize: 20
                    }
                },
                xAxis: {
                    type: "category",
                    data: [
                        '星期一',
                        '星期二',
                        '星期三',
                        '星期四',
                        '星期五',
                        '星期六',
                        '星期日'
                    ]
                },
                tooltip: {
                    show: true,
                    trigger: "axis",
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true
                        }
                    }
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        data: echartData.chartData,
                        type: "bar",
                        smooth: true
                    }
                ]
            });
            window.onresize = function () {
                //自适应大小
                echartData.chart.resize();
            };
        }

        onUnmounted(() => {
            echarts.dispose(echartData.chart)
        })

        return { initEchart };
    }
}
</script>

<style lang="scss" scoped>
.echarts-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>